const { defineConfig } = require('@vue/cli-service');
const { resolve } = require('path');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const VueDefineOptions = require('unplugin-vue-define-options/webpack');

function pathResolve(dir) {
  return resolve(__dirname, dir);
}

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  devServer: {
    host: '0.0.0.0',
    port: 8511,
    proxy: {
      '/sso/': {
        target: process.env.VUE_APP_PROXY_BASE_URL,
        changeOrigin: true,
      },
      '/auth/api': {
        target: process.env.VUE_APP_PROXY_AUTH_URL,
        changeOrigin: true,
      },
    },
  },
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].title = process.env.VUE_APP_TITLE_MAIN || process.env.VUE_APP_TITLE;
      return args;
    });

    // svg 雪碧图
    config.module.rule('svg').exclude.add(pathResolve('src/assets')).end();
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(pathResolve('src/assets'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();
  },
  parallel: false,
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-source-map' : false,
    plugins: [
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [
          ElementPlusResolver({
            importStyle: 'css',
            exclude: /^(?!.*loading-directive).*$/,
          }),
        ],
        eslintrc: {
          enabled: true, // Default `false`
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: false })],
      }),
      VueDefineOptions({
        include: [/\.vue$/, /\.vue\?vue/],
      }),
    ],
  },
});
